<template>
    <div style="width: 600px;">
        <bk-form :label-width="200" :model="data" :rules="rules" ref="validateForm1">
            <bk-image fit="contain" :src="src" style="width: 50px;"></bk-image>
            <bk-form-item label="用户名:">
                <bk-input :readonly="true" v-model="data.username"></bk-input>
            </bk-form-item>
            <bk-form-item label="真实姓名:" :property="'realname'">
                <bk-input :readonly="readonly" v-model="data.realname"></bk-input>
            </bk-form-item>
            <bk-form-item label="住宿地址:" :property="'address'">
                <bk-input :readonly="readonly" v-model="data.address"></bk-input>
            </bk-form-item>
            <bk-form-item label="手机号:" :property="'tel'">
                <bk-input :readonly="readonly" v-model="data.tel"></bk-input>
            </bk-form-item>
            <bk-form-item label="性别:" :property="'sex'">
                <bk-radio-group v-model="data.sex">
                    <bk-radio :value="'男'" :disabled="readonly">男</bk-radio>
                    <bk-radio :value="'女'" :disabled="readonly">女</bk-radio>
                </bk-radio-group>
            </bk-form-item>
            <bk-form-item>
                <bk-button style="margin-right: 3px;" theme="primary" @click="editinfo" :hidden="editbutton">编辑个人信息</bk-button>
                <bk-button style="margin-right: 3px;" theme="primary" @click="checkData" :hidden="savebutton">保存</bk-button>
                <bk-button style="margin-right: 3px;" theme="primary" @click="cancel" :hidden="cancelbutton">取消</bk-button>
            </bk-form-item>
        </bk-form>
    </div>
</template>
<script>

    export default {
        data () {
            const user = sessionStorage.getItem('user')
            // console.log(user)
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            this.getselfinfo()
            return {
                cancelbutton: true,
                savebutton: true,
                editbutton: false,
                readonly: true,
                username: '',
                man: true,
                woman: false,
                data: {
                    realname: '',
                    username: '',
                    sex: '',
                    tel: '',
                    address: ''
                },
                rules: {
                    realname: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于15个字符',
                            trigger: 'blur'
                        }
                    ],
                    sex: [
                        {
                            required: true,
                            message: '必选项',
                            trigger: 'blur'
                        }
                    ],
                    address: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        }
                    ],
                    tel: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            regex: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
                            message: '请输入正确手机号码',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            submitData () {
                alert(JSON.stringify(this.formData))
            },
            getselfinfo () {
                const qs = require('qs')
                this.axios({
                    url: '/getselfinfo/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': JSON.parse(sessionStorage.getItem('user'))
                    })
                }).then(res => {
                    const tmp = {
                        username: '',
                        realname: '',
                        sex: '',
                        address: '',
                        tel: ''
                    }
                    tmp.username = res.data.result_data.username
                    tmp.realname = res.data.result_data.realname
                    tmp.tel = res.data.result_data.tel
                    if (res.data.result_data.sex === 0) {
                        tmp.sex = '女'
                    } else {
                        tmp.sex = '男'
                    }
                    tmp.address = res.data.result_data.address
                    this.data = tmp
                })
            },
            editinfo () {
                this.$bkInfo({
                    title: '请更改您的信息'
                })
                this.readonly = false
                this.editbutton = true
                this.savebutton = false
                this.cancelbutton = false
            },
            checkData () {
                this.$refs.validateForm1.validate().then(validator => {
                    this.saveinfo()
                    this.readonly = true
                    this.editbutton = false
                    this.savebutton = true
                    this.cancelbutton = true
                }, validator => {
                    // 显示第一个出错位置
                    // alert(validator.content)
                })
            },
            saveinfo () {
                const qs = require('qs')
                this.axios({
                    url: '/saveinfo/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': JSON.parse(sessionStorage.getItem('user')),
                        'realname': this.data.realname,
                        'sex': this.data.sex,
                        'address': this.data.address,
                        'tel': this.data.tel
                    })
                }).then(res => {
                    if (res.data.message === 'success!') {
                        const h = this.$createElement
                        this.$bkInfo({
                            type: 'success',
                            title: '保存成功',
                            showFooter: false,
                            subHeader: h('a', {
                                style: {
                                    color: '#3a84ff',
                                    textDecoration: 'none',
                                    cursor: 'pointer'
                                }
                            })
                        })
                        this.$router.push({
                            name: 'meprice'
                        })
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '修改失败',
                            subTitle: '此窗口3秒后关闭',
                            showFooter: false
                        })
                        let num = 3
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                })
            },
            cancel () {
                this.getselfinfo()
                this.readonly = true
                this.editbutton = false
                this.savebutton = true
                this.cancelbutton = true
            }
        }
    }
</script>
